//搜索组件
import React, { useState } from 'react'
import { DatePicker } from 'antd';
// import type { DatePickerProps, GetProps } from 'antd';
import { Select } from 'antd';
// type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;
const { RangePicker } = DatePicker;
import '../../css/oper_inspertion/search.less'

interface SearchProps {
    onChange: (e: [string, string], b: string) => void;
}

const Search: React.FC<SearchProps> = ({ onChange }) => {
    //时间
    const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
    //检查结果
    const [value1, setValue1] = useState('')

    const handleSearch = () => {
        onChange(['', ''], '');
    }

    return (
        <>
            <div className='search'>
                <span>时间:
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        placeholder={['开始时间', '结束时间']}
                        onChange={(value, dateString) => {
                            console.log('开始时间: ', value);
                            console.log('结束时间: ', dateString);
                            setDateRange(value ? [value[0]?.toDate() || null, value[1]?.toDate() || null] : [null, null])
                        }}
                    // onOk={onOk}
                    />
                </span>
                <span className='search_person'>检查结果
                    <Select
                        className='search_select'
                        showSearch
                        placeholder="请选择"
                        filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        onChange={(value) => {
                            setValue1(value)
                        }}
                        options={[
                            { value: '隐患', label: '隐患' },
                            { value: '正常', label: '正常' },
                        ]}
                    />
                </span>
                <button className='search_btn' onClick={handleSearch}>查询</button>
            </div>
        </>
    )
}

export default Search